<!--根组件,用来装所有的组件,比如登录或者admin后台-->


<template>
    <!-- 通常编写组件的html结构，注意vue2.0中一定要有一个根元素 -->
    <div class="tmpl">
        <el-row>
            <!--1.0 左边菜单 -->
            <el-col :span="leftshow">
                <img src="../../../statics/imgs/logo.png" alt="">
                <div class="layout menu">
                    <el-menu :default-active="this.$store.state.global.menuid" class="el-menu-vertical-demo" :collapse="iscollapse">
                        <!--购物商城  -->
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-message"></i>购物商城</template>
<i>{{this.$store.state.global.menuid}}</i>
<el-menu-item-group>
    <router-link to="/admin/goodslist">
        <el-menu-item index="1-1">内容管理</el-menu-item>
    </router-link>
    <router-link to="/admin/catelist">
        <el-menu-item index="1-2">类别管理</el-menu-item>
    </router-link>
    <el-menu-item index="1-3">评论管理</el-menu-item>
</el-menu-item-group>
</el-submenu>

<!-- 订单管理 -->
<el-submenu index="2">
    <template slot="title">
                                <i class="el-icon-message"></i>订单管理</template>
    <el-menu-item-group>
        <el-menu-item index="2-1">订单列表</el-menu-item>
    </el-menu-item-group>
</el-submenu>
</el-menu>
</div>
</el-col>

<!-- 2.0 右边区域 -->
<el-col :span="rightshow">
    <!-- 2.0.1 顶部区域 -->
    <el-row>
        <el-col :span="24">
            <div class="topbg">
                <el-row>
                    <el-col :span="1">
                        <!-- 控制菜单的展开和收缩图标 -->
                        <i @click="showhide" class="el-icon-menu layout area"></i>
                    </el-col>
                    <el-col :span="23">
                        <span>欢迎xxx登录</span>
                        <el-dropdown @command='loginOut' split-button type="primary">
                            更多
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command='a'>修改密码</el-dropdown-item>
                                <el-dropdown-item command='b'>注销登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </div>

        </el-col>
    </el-row>
    <!-- 2.0.2 内容矛 -->
    <el-row>
        <el-col :span="24">
            <!-- 利用vue-router进行填充 -->
            <router-view></router-view>
        </el-col>
    </el-row>
</el-col>

</el-row>
</div>
</template>

<script>
    // es6的export default{ 写法等同于 module.exports={
    export default {
        // es6的写法 data() 等同于es5的 data:function()
        data() {
            return {
                iscollapse: false, //为false的时候是展开
                leftshow: 4,
                rightshow: 20
            }
        },
        methods: {
            // 退出登录功能
            loginOut(command) {
                // console.log(command);
                if (command == 'b') {
                    var url = '/admin/account/logout';
                    this.$http.get(url).then(res => {
                        if (res.data.status == 1) {
                            this.$message.error(res.data.message);
                            return;
                        }
                        // 注销成功后,返回登录页面
                        this.$message.success(res.data.message);
                        this.$router.push({
                            'name': 'login'
                        });
                    })
                }

            },
            // 展开和收缩功能
            showhide() {
                this.iscollapse = !this.iscollapse;
                if (this.iscollapse) { //收缩
                    this.leftshow = 1; //收缩和展开的时候,对应的值要产生变化
                    this.rightshow = 23;
                } else { //展开
                    this.leftshow = 4;
                    this.rightshow = 20;
                }
            }
        }
    }
</script>

<style>

</style>


<!--
<style></style>  中的样式是全局的
<style scoped></style> 中的样式是当前组件的

-->